<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my云吖</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
     <!-- 1 引入swiper-bundle.min.css -->
     <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <style>

    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      /* background: #fff; */

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }
    .swiper-slide img{
        width: 100%;
        height: 100%;
    }

    
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
    }

    /* //自定义样式 */
    .app_exp{
        position: relative;
    }
    .swiper-pagination{
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .swiper-pagination-bullet{
        margin:0 5px;
        border: 3px solid #fff;
        background-color: #d5d5d5;
        opacity: 1;
        box-sizing: border-box;
        width: 10px;
        height: 10px;
        outline:none;
    }

    .swiper-pagination-bullet-active {
        opacity: 1;
        background: #fff;
        border-color: #00aadc;
        
    }
    </style>
</head>
<body>
    <!-- 固定咨询div consult -->
    <!-- <div class="consult">
        <a href="#"><img src="img/consult.jpg" alt=""></a>
    </div> -->

    <!-- 固定在下方的 留言 message  -->
    <div class="message">
        <span><img src="img/img-email24.png" alt=""></span>
        给我们留言吧！ 
    </div>



    <!-- 头部开始 -->
    <header>
        <div class="w">
            <a href="#"><img src="img/logo.png" alt=""></a>
            <nav>
            <ul>
               <li ><a href="index.html" class="active">首页</a></li>
               <li><a href="brand.html">品牌档案</a></li>
               <li><a href="introductPd.html">产品介绍</a></li>
               <li><a href="case.html">客户案例</a></li>
               <li><a href="pdAdvantage.html">项目优势</a></li>
               <li><a href="cooperation.html">渠道合作</a></li>
               <li><a href="#">公司文化</a></li>
               <li><a href="#">关于我们</a></li> 
            </ul> 
            </nav>
        </div>  
    </header>
    <!-- 头部结束 -->
    
    <!-- 轮播图 -->
    <div class="slide">
        <div class="pagination">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <ul>
            <li><img src="img/home_swiper1.png" alt=""></li>
            <li><img src="img/home_swiper2.png" alt=""></li>
            <li>
                <div class="mask">
                    <h2>云吖小程序火热招商中</h2>
                    <p>智慧SaaS、小程序、社交电商三大风口，携手云吖掘金万亿市场</p>
                    <a href="#">申请合作商</a>
                    <a href="#">合作商入口</a>
                </div>
                <img src="img/bg1.png" alt="">
            </li>
            <li><img src="img/home_swiper4.png" alt=""></li>
            <li><img src="img/home_swiper1.png" alt=""></li>
            <span class="clearfix"></span>
        </ul>
    </div> 

    <!-- 微信小程序 wxapps -->
    <div class="wxapps">
        <div class="w">
            <div class="wx_title">
                <h2><span><i>1</i> SMALL APPLICATION</span></h2>
                <h3>云吖微信小程序</h3>
                <p>我们打造各个行业微信小程序，让客户生意更好做</p>
            </div>
            <div class="wx_con">
                <ul>
                    <li>
                        <div class="wx_img">
                            <img src="img/p1.png" alt="" class="p">
                            <img src="img/p_bg1.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <li>
                        <div class="wx_img">
                            <img src="img/p2.png" alt="" class="p">
                            <img src="img/p_bg2.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <li>
                        <div class="wx_img">
                            <img src="img/p3.png" alt="" class="p">
                            <img src="img/p_bg3.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <li>
                        <div class="wx_img">
                            <img src="img/p4.png" alt="" class="p">
                            <img src="img/p_bg4.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <li>
                        <div class="wx_img">
                            <img src="img/p5.png" alt="" class="p">
                            <img src="img/p_bg5.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <li>
                        <div class="wx_img">
                            <img src="img/p6.png" alt="" class="p">
                            <img src="img/p_bg6.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <div class="clearfix"></div>
                </ul>

                <ul>
                    <li>
                        <div class="wx_img">
                            <img src="img/p1.png" alt="" class="p">
                            <img src="img/p_bg1.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <li>
                        <div class="wx_img">
                            <img src="img/p2.png" alt="" class="p">
                            <img src="img/p_bg2.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <li>
                        <div class="wx_img">
                            <img src="img/p3.png" alt="" class="p">
                            <img src="img/p_bg3.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <li>
                        <div class="wx_img">
                            <img src="img/p4.png" alt="" class="p">
                            <img src="img/p_bg4.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <li>
                        <div class="wx_img">
                            <img src="img/p5.png" alt="" class="p">
                            <img src="img/p_bg5.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <li>
                        <div class="wx_img">
                            <img src="img/p6.png" alt="" class="p">
                            <img src="img/p_bg6.png" alt="" class="p_bg">
                        </div>
                        <h3>智慧商圈</h3>
                        <p>Business</p>
                    </li>
                    <div class="clearfix"></div>
                </ul>

                <div class="more"> <b>更多版本：</b> 数码家电、家居家纺、日用百货、婚庆服务、婚纱摄影、旅游、房产、金融、医疗健康、健身运动、洗浴按摩、家政服务、票务. </div>
            </div>
        </div>
      
    </div>

    <!-- 加盟优势 advantage -->
    <div class="advantage">
        <div class="ad_title">
            <h2><span><i>2</i> ADVANTAGE</span></h2>
            <h3>加盟云吖 6大优势</h3>
            <p>完整强大的多行业电商解决方案，商城、支付、会员、订单等功能，小程序即商店</p>
        </div>
        <div class="ad_con">
            <ul>
                <li>
                    <img src="img/pro1.png" alt="">
                    <div class="txt">
                        <h3>超值的售后服务</h3>
                        <p>售后服务24小时全程在线解答,为您提供售后服务，解决问题</p>
                    </div>
                </li>
                <li>
                    <img src="img/pro2.png" alt="">
                    <div class="txt">
                        <h3>专业的售前支持</h3>
                        <p>顶级品牌开发经验，屈臣氏、话机世界等大型平台开发，对您的需求有着全面的理解和掌握</p>
                    </div>
                </li>
                <li>
                    <img src="img/pro3.png" alt="">
                    <div class="txt">
                        <h3>雄厚的技术实力</h3>
                        <p>多年的微信产品开发经验，腾讯产品经理加阿里技术团队打造。</p>
                    </div>
                </li>
            </ul>

            <ul>
                <li>
                    <img src="img/pro4.png" alt="">
                    <div class="txt">
                        <h3>全新的合作政策</h3>
                        <p>摒弃传统软件小程序的加盟合作方式，新颖的技术服务合作模式</p>
                    </div>
                </li>
                <li>
                    <img src="img/pro5.png" alt="">
                    <div class="txt">
                        <h3>多样化的盈利渠道</h3>
                        <p>不单通过产品售卖盈利，新增扩展经销渠道，定制开发服务，商户交易流水返点等盈利渠道</p>
                    </div>
                </li>
                <li>
                    <img src="img/pro6.png" alt="">
                    <div class="txt">
                        <h3>配套营销产品</h3>
                        <p>定期邀请业内知名大咖教您如何玩转社交电商</p>
                    </div>
                </li>
            </ul>
        </div>

    </div>

    <!-- 合作伙伴 -->
    <div class="friends">
        <img src="img/friends.png" alt="">
    </div>

    <!-- 小程序的实例展示 app_exp -->
    <div class="app_exp">
        <!-- Swiper -->
   <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="img/app1.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app2.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app3.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app4.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app5.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app6.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app7.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app8.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app9.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app10.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app11.png" alt=""></div>
      <div class="swiper-slide"><img src="img/app12.png" alt=""></div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
    </div>

    <!-- 覆盖地区 map -->
    <div class="map">
        <img src="img/map.png" alt="">
        <div id="server_num">1600+</div>
        <div id="server_time"><span class="h">24</span>x<span class="week">7</span>h</div>
    </div>



    <!-- footer开始 -->
    <footer>
        <div class="w">
            <dl>
                <dt>联系我们</dt>
                <dd>广州万晨科技有限公司</dd>
                <dd>合作咨询：020-81682657</dd>
                <dd>地址：广州市天河区黄村西路107号汇创一号仓306</dd>
            </dl>

            <dl>
                <dt>关于我们</dt>
                <dd><a href="#">云吖介绍</a></dd>
                <dd><a href="#">集团愿景</a></dd>
                <dd><a href="#">联系我们</a></dd>
            </dl>

            <dl>
                <dt class="proServer">产品服务</dt>
                <dd><a href="#">智慧餐饮</a> <a href="#">超级商城</a></dd>
                <dd><a href="#">智慧零售</a> <a href="#">智慧商圈</a></dd>
                <dd><a href="#">智慧医疗</a> <a href="#">智慧美业</a></dd>
                <dd><a href="#">智慧KTV</a> <a href="#">智慧酒店</a></dd>
                <dd><a href="#">智慧农贸</a> <a href="#">高级定制</a></dd>
            </dl>

            <dl>
                <dt class="proServer">公司动态</dt>
                <dd><a href="#">重投华讯与保定市公安局携手引领太赫兹应用新变革</a></dd>
                <dd><a href="#">重投华讯与保定市公安局携手引领太赫兹应用新变革</a></dd>
                <dd><a href="#">华讯方舟集团为深圳皇岗海关入境查验保驾护航</a></dd>
                <dd><a href="#">科创基金入股华讯方舟微电子 致力高频芯片研发</a></dd>
            </dl>

        </div>

    </footer>
    <!-- footer结束 -->





    <script src="js/base.js"></script>
    <script src="js/index.js"></script>
       <!-- Swiper JS -->
  <script src="js/swiper-bundle.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      autoplay: {
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
      initialSlide :0,
      slidesPerView: 7,
      spaceBetween: 30,
	  centeredSlides: true,
	  loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

    // console.log(swiper.activeIndex);

</script>
    
</body>
</html>



            

</div>